<template>
  <div class="service">
    <div class="messageType">
      <div :class="{'type': true, 'currentType': currentType === 0}" @click="handleChangeType(0)" v-if="currentTab === '1-1'">
        全部未读
      </div>
      <div :class="{'type': true, 'currentType': currentType === 1}" @click="handleChangeType(1)">
        天鹿物流
      </div>
      <div :class="{'type': true, 'currentType': currentType === 2}" @click="handleChangeType(2)">
        系统消息
      </div>
    </div>
    <el-table :data="mesData" stripe style="width: 100%" height="485">
      <el-table-column align="center" min-width="300" show-overflow-tooltip>
        <template #header>
          <div class="tableHeader">
            <el-checkbox v-model="selectedAll" @change="check => { handleSelectAll(check) }" />
            <span class="title">标题内容</span>
          </div>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isSelect" @change="check => { handleSelect({ check: check, key:scope.row.key }) }" />
          <span class="firstColumn">
            <div v-if="!scope.row.isRead" class="noRead" />
            {{scope.row.message_content}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="message_createTime" label="提交时间" align="center" />
      <el-table-column prop="message_type" label="类型" align="center" />
    </el-table>
    <div class="pagination">
      <Pagination :pagination="mesPagination" :numChange="handlePaginate" :reload="reload"/>
    </div>
    <div class="manage">
      <el-button type="default" @click="handleDelete">删除</el-button>
      <el-button type="default" @click="handleRead">标记已读</el-button>
      <el-button type="default" @click="handleAllRead">全部已读</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
  name: '',
  components: {
    Pagination
  },
  props: {
    currentTab: {
      type: String,
      default: '1-1'
    },
    allLost: {
      type: Boolean
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      mesData: state => state.message.mesData,
      mesPagination: state => state.message.mesPagination,
      reload: state => state.message.reload,
      login: state => state.user.login
    })
  },
  data () {
    return {
      currentType: '',
      selectedAll: false
    };
  },
  created(){
    this.fetchMessages({
      message_userid: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id,
      pn: this.mesPagination.pageNum,
      pageSize: this.mesPagination.pageSize,
      messageNumber: 0
    });
  },
  methods: {
    //页面的分页情况为 el-pagination并不能实时更新他的参数(无响应), 每当变化一次currentType时 让他消失 再设置它的参数即可
    ...mapActions([ 'fetchMessages', 'fetchDeleteMessage', 'fetchSetRead']),
    ...mapMutations(['handleSelectAll', 'handleSelect','handleRead','handleAllRead','saveMesCount','resetPagination','reloadPagination']),
    handleChangeType (type) {
      let leftNum = null;
      let rightAddNum = null
      this.reloadPagination(false);
      this.resetPagination();
      switch(this.currentTab){
        case '1-1':
          leftNum = 1;
          rightAddNum = 0;
          break;
        case '1-2':
          leftNum = 3;
          rightAddNum = 1;
          break;
        case '1-3':
          leftNum = 6;
          rightAddNum = 6;
          break;
      }
      if (this.currentType !== type) {
        this.currentType = type;
        this.fetchMessages({
          message_userid: this.userInfo.user_id,
          pn: this.mesPagination.pageNum,
          pageSize: this.mesPagination.pageSize,
          messageNumber: type + leftNum
        });
      } else {
        this.currentType = !this.currentType;
        this.fetchMessages({
          message_userid: this.userInfo.user_id,
          pn: this.mesPagination.pageNum,
          pageSize: this.mesPagination.pageSize,
          messageNumber: rightAddNum
        });
      }
    },
    handlePaginate(num) {
      let leftNum = null;
      let rightAddNum = null
      switch(this.currentTab){
        case '1-1':
          leftNum = 1;
          rightAddNum = 0;
          break;
        case '1-2':
          leftNum = 3;
          rightAddNum = 1;
          break;
        case '1-3':
          leftNum = 6;
          rightAddNum = 6;
          break;
      }
      this.fetchMessages({
        message_userid: this.userInfo.user_id,
        pn: num,
        pageSize: this.mesPagination.pageSize,
        messageNumber: this.currentType ? this.currentType + leftNum : rightAddNum
      });
    },
    handleDelete(){
      let list =  []; 
      this.mesData.forEach(item => {
        if(item.isSelect){
          list.push(item.message_id);
        }
      });
      this.fetchDeleteMessage(list);
    },
    handleRead(){
      let list =  [];
      this.mesData.forEach(item => {
        if(item.isSelect && !item.isRead){
          list.push(item.message_id);
        }
      });
      if(list.length !== 0){
        this.fetchSetRead(list);
      }
    },
    handleAllRead(){
      let list =  []; 
      this.mesData.forEach(item => {
        if(!item.isRead){
          list.push(item.message_id);
        }
      });
      if(list.length !== 0){
        this.fetchSetRead(list);
      }
    }
  },
  watch: {
    mesData: {
      handler (newV) {
        const arr = [];
        newV.forEach(item => {
          arr.push(item.isSelect);
        });
        this.selectedAll = arr.reduce((a, b) => a && b)
      },
      deep: true
    },
    allLost(){
      this.currentType = '';
    },
    currentTab(){
      this.reloadPagination(false);
      this.resetPagination();
    }
  }
}
</script>
<style lang='scss' scoped src="../index.scss" />
<style lang="scss">
  .service{
    .el-table {
      .el-table__row:nth-last-child(1){
        td{
          border-bottom: unset!important;
        }
      }
    }
  }
</style>